<template>
  <div class="standard-maintain-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">查看技术标准</h1>
        <p class="page-subtitle">支持导入/导出和删除操作</p>
      </div>
      <div class="header-actions" v-if="isAdmin">
        <input
          type="file"
          ref="fileInput"
          accept=".xlsx,.xls"
          style="display: none"
          @change="handleFileChange"
        />
        <el-button size="large" class="excel-import-btn" @click="triggerFileInput">
          <i class="el-icon-upload"></i> 导入Excel
        </el-button>
        <el-button size="large" class="excel-export-btn" @click="handleExportExcel">
          <i class="el-icon-download"></i> 导出Excel
        </el-button>
        <el-button size="large" class="template-btn" @click="downloadTemplate">
          <i class="el-icon-document"></i> 下载模板
        </el-button>

      </div>
    </div>

    <!-- 只读指标展示区 -->
    <div class="main-content">
      <div class="panel-card" style="width:100%;">
        <h3 class="panel-title" style="margin-bottom:24px;">全部技术标准</h3>
        

        
        <div v-if="Object.keys(standardData).length === 0" class="empty-all">
          <div class="empty-icon">📂</div>
          <p class="empty-text">暂无数据，请先导入Excel。</p>
        </div>
        <div v-for="(versions, paperType) in standardData" :key="`${paperType}-${forceUpdateKey}`" class="paper-group">
          <div class="paper-title" style="display:flex;align-items:center;justify-content:space-between;">
            <div>
              <span class="paper-dot"></span>
              <span>纸种：{{ getPaperTypeLabel(paperType) }}</span>
            </div>
          </div>
          <template v-if="versions.length">
            <div v-for="version in [...versions].sort((a, b) => (b.createdAt || '').localeCompare(a.createdAt || ''))" :key="version.id" class="version-block" style="position:relative;">
              <div class="version-title" style="display:flex;align-items:center;justify-content:space-between;">
                <div @click="toggleVersion(paperType, version.id)" style="cursor: pointer;flex:1;display:flex;align-items:center;">
                  <i :class="isVersionExpanded(paperType, version.id) ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                  <span>
                    版本：{{ version.id }}
                  </span>
                  <span class="version-remark">备注：{{ version.remark }}</span>
                </div>
                <div class="version-actions" style="margin-left: 12px;">
                  <el-button 
                    type="danger" 
                    size="small" 
                    @click.stop="deleteVersion(paperType, version.id)"
                    style="margin-left:8px;"
                  >
                    <i class="el-icon-delete"></i>
                    删除
                  </el-button>
                </div>
              </div>
              <div v-if="isVersionExpanded(paperType, version.id)" class="version-content">
                <template v-if="isCorrugated(paperType) || isCoated(paperType)">
                  <div v-for="grade in getAllGrades(version.data)" :key="grade" style="margin-bottom:18px;">
                    <div style="font-weight:600;color:#20c997;margin-bottom:4px;">等级：{{ grade }}</div>
                    <div class="table-wrapper">
                      <el-table :data="pivotTableByGrade(version.data, grade)" class="standard-table" stripe border style="width:100%;margin-top:4px;">
                        <el-table-column prop="weight" label="克重" width="80" fixed />
                        <el-table-column
                          v-for="col in pivotColumnsByGrade(version.data, grade)"
                          :key="col.key"
                          :prop="col.key"
                          :label="col.label"
                          :min-width="120"
                          header-align="center"
                        >
                          <template #header>
                            <div style="white-space: pre-line; text-align: center; line-height: 1.2;">{{ col.label }}</div>
                          </template>
                          <template #default="{ row }">
                            <span v-html="formatStandardCell(row[col.key])"></span>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </template>
                <template v-else-if="!isCorrugated(paperType) && !isCoated(paperType)">
                  <div class="table-wrapper">
                    <el-table :data="pivotTable(version.data)" class="standard-table" stripe border style="width:100%;margin-top:8px;">
                      <el-table-column prop="weight" label="克重" width="80" fixed />
                      <el-table-column
                        v-for="col in pivotColumns(version.data)"
                        :key="col.key"
                        :prop="col.key"
                        :label="col.label"
                        :min-width="120"
                        header-align="center"
                      >
                        <template #header>
                          <div style="white-space: pre-line; text-align: center; line-height: 1.2;">{{ col.label }}</div>
                        </template>
                        <template #default="{ row }">
                          <span v-html="formatStandardCell(row[col.key])"></span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as XLSX from 'xlsx'

const STANDARD_STORAGE_KEY = 'factory_standard_versions'
const standardData = ref({})

// 版本展开状态管理
const expandedVersions = ref({}) // { [paperType]: versionId | null }
const forceUpdateKey = ref(0) // 强制重新渲染的key


// 权限控制：从 localStorage 读取用户角色
const isAdmin = ref(false)
if (typeof window !== 'undefined') {
  try {
    const userRole = localStorage.getItem('userRole')
    isAdmin.value = userRole === 'admin' || userRole === 'superadmin'
  } catch {}
}

function getPaperTypeLabel(key) {
  // 兼容label
  if (key === 'coated') return '箱板纸'
  if (key === 'corrugated') return '高强瓦楞原纸'
  return key
}

function flattenVersionData(data) {
  // data: [{weight, grades:[{grade, items:[{name,unit,standard}]}]}]
  const arr = []
  data.forEach(w => {
    w.grades.forEach(g => {
      g.items.forEach(i => {
        arr.push({ weight: w.weight, grade: g.grade, name: i.name, unit: i.unit, standard: i.standard })
      })
    })
  })
  return arr
}

function pivotColumns(data) {
  // 收集所有等级-指标组合
  const set = new Set()
  data.forEach(w => {
    w.grades.forEach(g => {
      g.items.forEach(i => {
        // 统一单位格式
        let unit = i.unit
        if (unit === 'g/㎡') unit = 'g/m²'
        if (unit === 'g/m2') unit = 'g/m²'
        if (unit === 'g/m^2') unit = 'g/m²'
        set.add(`${g.grade}||${i.name}||${unit}`)
      })
    })
  })
  // 返回 [{key, label}]
  return Array.from(set).map(s => {
    const [grade, name, unit] = s.split('||')
    return {
      key: `${grade}||${name}||${unit}`,
      label: unit ? `${grade} - ${name}\n(${unit})` : `${grade} - ${name}`
    }
  })
}
function pivotTable(data) {
  // 行：克重，列：等级-指标，值：标准值
  const weights = Array.from(new Set(data.map(w => w.weight)))
  const columns = pivotColumns(data)
  // 构建每一行
  return weights.map(weight => {
    const row = { weight }
    data.filter(w => w.weight === weight).forEach(w => {
      w.grades.forEach(g => {
        g.items.forEach(i => {
          // 统一单位格式
          let unit = i.unit
          if (unit === 'g/㎡') unit = 'g/m²'
          if (unit === 'g/m2') unit = 'g/m²'
          if (unit === 'g/m^2') unit = 'g/m²'
          row[`${g.grade}||${i.name}||${unit}`] = i.standard
        })
      })
    })
    return row
  })
}

function isCorrugated(paperType) {
  // 只要名字里有"瓦楞"就认为是瓦楞纸
  return getPaperTypeLabel(paperType).includes('瓦楞')
}
function isCoated(paperType) {
  // 箱板纸也按等级分组显示
  return getPaperTypeLabel(paperType).includes('箱板纸')
}
function getAllGrades(data) {
  // 收集所有等级
  const set = new Set()
  data.forEach(w => {
    w.grades.forEach(g => {
      set.add(g.grade)
    })
  })
  return Array.from(set)
}
function pivotColumnsByGrade(data, grade) {
  // 只收集该等级下的所有指标
  const set = new Set()
  data.forEach(w => {
    w.grades.forEach(g => {
      if (g.grade === grade) {
        g.items.forEach(i => {
          // 统一单位格式
          let unit = i.unit
          if (unit === 'g/㎡') unit = 'g/m²'
          if (unit === 'g/m2') unit = 'g/m²'
          if (unit === 'g/m^2') unit = 'g/m²'
          set.add(`${g.grade}||${i.name}||${unit}`)
        })
      }
    })
  })
  return Array.from(set).map(s => {
    const [g, name, unit] = s.split('||')
    return {
      key: `${g}||${name}||${unit}`,
      label: unit ? `${name}\n(${unit})` : name
    }
  })
}
function pivotTableByGrade(data, grade) {
  // 行：克重，列：该等级下的指标，值：标准值
  const weights = Array.from(new Set(data.map(w => w.weight)))
  const columns = pivotColumnsByGrade(data, grade)
  return weights.map(weight => {
    const row = { weight }
    data.filter(w => w.weight === weight).forEach(w => {
      w.grades.forEach(g => {
        if (g.grade === grade) {
          g.items.forEach(i => {
            // 统一单位格式
            let unit = i.unit
            if (unit === 'g/㎡') unit = 'g/m²'
            if (unit === 'g/m2') unit = 'g/m²'
            if (unit === 'g/m^2') unit = 'g/m²'
            row[`${g.grade}||${i.name}||${unit}`] = i.standard
          })
        }
      })
    })
    return row
  })
}

function formatStandardCell(val) {
  if (!val) return ''
  const v = val.toString().trim()
  if (v.includes('±')) {
    return `<span class='std-tag std-range'>${v}</span>`
  }
  if (/^(≥|>=)/.test(v)) {
    return `<span class='std-tag std-ge'>${v.replace(/^≥|^>=/,'≥')}</span>`
  }
  if (/^(≤|<=)/.test(v)) {
    return `<span class='std-tag std-le'>${v.replace(/^≤|^<=/,'≤')}</span>`
  }
  if (/^>/.test(v)) {
    return `<span class='std-tag std-gt'>${v}</span>`
  }
  if (/^</.test(v)) {
    return `<span class='std-tag std-lt'>${v}</span>`
  }
  if (/^\d+(\.\d+)?-\d+(\.\d+)?$/.test(v)) {
    return `<span class='std-tag std-interval'>${v}</span>`
  }
  return `<span class='std-tag std-value'>${v}</span>`
}

// 生成简洁唯一版本ID（V+年月日-2位序号）
function generateVersionId() {
  const now = new Date();
  const pad = n => String(n).padStart(2, '0');
  const date = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}`;
  // 统计当天已有版本数
  let maxSeq = 0;
  Object.values(standardData.value).forEach(versions => {
    versions.forEach(v => {
      if (v.id && v.id.startsWith(`V${date}`)) {
        const m = v.id.match(/-(\d{2})$/);
        if (m) {
          const num = parseInt(m[1], 10);
          if (num > maxSeq) maxSeq = num;
        }
      }
    });
  });
  const seq = pad(maxSeq + 1);
  return `V${date}-${seq}`;
}

const fileInput = ref(null)
function triggerFileInput() {
  fileInput.value.click()
}
function handleFileChange(event) {
  const file = event.target.files[0]
  if (file) {
    handleImportExcel(file)
    event.target.value = ''
  }
}
async function handleImportExcel(file) {
  ElMessage.info('正在解析Excel文件...')
  const reader = new FileReader()
  reader.onload = async (e) => {
    try {
      const workbook = XLSX.read(e.target.result, { type: 'binary' })
      const sheetName = workbook.SheetNames[0]
      const worksheet = workbook.Sheets[sheetName]
      const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
      if (data.length < 2) {
        ElMessage.error('Excel文件格式不正确，请确保包含表头和数据行')
        return
      }
      const headers = data[0]
      if (headers.length < 3 || !headers.includes('纸种') || !headers.includes('克重') || !headers.includes('等级')) {
        ElMessage.error('Excel文件格式不正确，请使用正确的模板格式')
        return
      }
      // 弹窗让用户输入版本号
      let customVersionId = ''
      try {
        const { value } = await ElMessageBox.prompt(
          '请输入版本号（留空则自动生成）', '自定义版本号', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^[a-zA-Z0-9\-_]*$/,
            inputErrorMessage: '只能包含字母、数字、-、_'
          }
        )
        customVersionId = value
      } catch {}
      const versionId = customVersionId && customVersionId.trim() ? customVersionId.trim() : generateVersionId()
      const newStandardData = {}
      for (let i = 1; i < data.length; i++) {
        const row = data[i]
        if (row.length < 3) continue
        const paperType = row[0]?.toString().trim()
        const weight = row[1]?.toString().trim()
        const grade = row[2]?.toString().trim()
        const indicatorName = row[3]?.toString().trim()
        let unit = row[4]?.toString().trim() || ''
        // 统一单位格式
        if (unit === 'g/㎡') unit = 'g/m²'
        if (unit === 'g/m2') unit = 'g/m²'
        if (unit === 'g/m^2') unit = 'g/m²'
        const standard = row[5]?.toString().trim() || ''
        if (!paperType || !weight || !grade || !indicatorName) continue
        if (!newStandardData[paperType]) newStandardData[paperType] = []
        let version = newStandardData[paperType].find(v => v.id === versionId)
        if (!version) {
          version = {
            id: versionId,
            label: 'Excel导入版本',
            createdAt: new Date().toISOString(),
            remark: '从Excel导入',
            data: []
          }
          newStandardData[paperType].push(version)
        }
        let weightItem = version.data.find(w => w.weight === weight)
        if (!weightItem) {
          weightItem = { weight, grades: [] }
          version.data.push(weightItem)
        }
        let gradeItem = weightItem.grades.find(g => g.grade === grade)
        if (!gradeItem) {
          gradeItem = { grade, items: [] }
          weightItem.grades.push(gradeItem)
        }
        let indicatorItem = gradeItem.items.find(item => item.name === indicatorName)
        if (!indicatorItem) {
          indicatorItem = { name: indicatorName, unit, standard }
          gradeItem.items.push(indicatorItem)
        } else {
          indicatorItem.unit = unit
          indicatorItem.standard = standard
        }
      }
      // 合并到现有数据
      Object.keys(newStandardData).forEach(paperType => {
        if (!standardData.value[paperType]) {
          standardData.value[paperType] = []
        }
        standardData.value[paperType].push(...newStandardData[paperType])
      })
      localStorage.setItem(STANDARD_STORAGE_KEY, JSON.stringify(standardData.value))
      // 导入后重新初始化展开状态
      initVersionExpandedState()
      ElMessage.success('Excel数据已成功导入！')
    } catch (error) {
      ElMessage.error('导入Excel失败，请检查文件格式或内容')
    }
  }
  reader.readAsBinaryString(file)
  return false
}
function handleExportExcel() {
  try {
    const exportData = [
      ['纸种', '克重', '等级', '指标名称', '单位', '标准值']
    ]
    Object.keys(standardData.value).forEach(paperType => {
      const versions = standardData.value[paperType]
      versions.forEach(version => {
        version.data.forEach(weight => {
          weight.grades.forEach(grade => {
            grade.items.forEach(indicator => {
              exportData.push([
                paperType,
                weight.weight,
                grade.grade,
                indicator.name,
                indicator.unit,
                indicator.standard
              ])
            })
          })
        })
      })
    })
    const worksheet = XLSX.utils.aoa_to_sheet(exportData)
    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, '技术标准')
    worksheet['!cols'] = [
      { wch: 15 },
      { wch: 10 },
      { wch: 12 },
      { wch: 20 },
      { wch: 10 },
      { wch: 15 }
    ]
    XLSX.writeFile(workbook, `技术标准_${new Date().toISOString().slice(0, 10)}.xlsx`)
    ElMessage.success('Excel文件已导出')
  } catch (error) {
    ElMessage.error('导出Excel失败')
  }
}
function downloadTemplate() {
  try {
    const templateData = [
      ['纸种', '克重', '等级', '指标名称', '单位', '标准值'],
      ['箱板纸', '120', '一级品', '定量', 'g/m²', '±5'],
      ['箱板纸', '120', '一级品', '水份', '%', '8.5±2'],
      ['箱板纸', '120', '一级品', '环压指数', 'N·m/g', '6.5'],
      ['高强瓦楞原纸', '100', 'AAA级', '定量', 'g/m²', '±5'],
      ['高强瓦楞原纸', '100', 'AAA级', '水份', '%', '8±2'],
      ['高强瓦楞原纸', '100', 'A级', '定量', 'g/m²', '±5'],
      ['高强瓦楞原纸', '100', 'A级', '水份', '%', '8±2']
    ]
    const worksheet = XLSX.utils.aoa_to_sheet(templateData)
    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, '技术标准模板')
    worksheet['!cols'] = [
      { wch: 15 },
      { wch: 10 },
      { wch: 12 },
      { wch: 20 },
      { wch: 10 },
      { wch: 15 }
    ]
    XLSX.writeFile(workbook, '技术标准模板.xlsx')
    ElMessage.success('模板文件已下载')
  } catch (error) {
    ElMessage.error('下载模板失败')
  }
}
// 删除单个版本
function deleteVersion(paperType, versionId) {
  const paperTypeLabel = getPaperTypeLabel(paperType)
  ElMessageBox.confirm(`确定要删除纸种"${paperTypeLabel}"的版本"${versionId}"吗？此操作不可恢复！`, '警告', {
    confirmButtonText: '确定删除',
    cancelButtonText: '取消',
    type: 'warning',
    confirmButtonClass: 'el-button--danger',
  }).then(() => {
    // 从版本数组中删除指定版本
    const versions = standardData.value[paperType]
    const versionIndex = versions.findIndex(v => v.id === versionId)
    
    if (versionIndex !== -1) {
      versions.splice(versionIndex, 1)
      
      // 如果该纸种下没有版本了，删除整个纸种
      if (versions.length === 0) {
        delete standardData.value[paperType]
      }
      
      // 保存到localStorage
      localStorage.setItem(STANDARD_STORAGE_KEY, JSON.stringify(standardData.value))
      
      // 如果删除的是当前展开的版本，关闭展开状态
      if (expandedVersions.value[paperType] === versionId) {
        expandedVersions.value[paperType] = null
      }
      
      // 强制重新渲染
      forceUpdateKey.value++
      
      ElMessage.success(`版本"${versionId}"已删除`)
    } else {
      ElMessage.error('版本不存在')
    }
  }).catch(() => {
    // 用户取消删除
    ElMessage.info('已取消删除')
  })
}
function deletePaperType(paperType) {
  ElMessageBox.confirm(`确定要删除纸种“${getPaperTypeLabel(paperType)}”及其所有版本吗？此操作不可恢复！`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    delete standardData.value[paperType]
    localStorage.setItem(STANDARD_STORAGE_KEY, JSON.stringify(standardData.value))
    ElMessage.success('纸种已删除')
  })
}
// 切换版本展开/折叠状态（同一纸种下只展开一个，点已展开的则折叠）
function toggleVersion(paperType, versionId) {
  const newExpandedVersions = { ...expandedVersions.value };
  if (newExpandedVersions[paperType] === versionId) {
    newExpandedVersions[paperType] = null;
  } else {
    newExpandedVersions[paperType] = versionId;
  }
  expandedVersions.value = newExpandedVersions;
  forceUpdateKey.value++;
}

// 检查版本是否展开
function isVersionExpanded(paperType, versionId) {
  return expandedVersions.value[paperType] === versionId;
}

// 初始化版本展开状态（全部折叠）
function initVersionExpandedState() {
  const newExpandedVersions = {};
  Object.keys(standardData.value).forEach(paperType => {
    newExpandedVersions[paperType] = null;
  });
  expandedVersions.value = newExpandedVersions;
}





onMounted(() => {
  const raw = localStorage.getItem(STANDARD_STORAGE_KEY)
  if (raw) {
    try {
      standardData.value = JSON.parse(raw)
      // 初始化版本展开状态
      initVersionExpandedState()
    } catch (error) {
      console.error('技术标准数据加载失败:', error)
    }
  }
})
</script>

<style>
.standard-maintain-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
  width: 100%;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #409eff 0%, #337ecc 100%);
  color: white;
  border-radius: 12px;
  padding: 24px 32px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
}

.header-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: white;
  margin: 0 0 6px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: -0.5px;
}

.page-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-weight: 400;
}

/* 头部按钮区美化 */
.header-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* 统一按钮基础样式 - 与出厂报告列表页按钮风格保持一致 */
.excel-import-btn, .excel-export-btn, .template-btn, .clear-btn {
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.2);
  transition: all 0.3s ease;
  min-width: 120px;
  min-height: 44px; /* 确保触摸友好 */
}

/* 移动端按钮优化 */
@media (max-width: 768px) {
  .excel-import-btn, .excel-export-btn, .template-btn, .clear-btn {
    min-height: 44px;
    touch-action: manipulation;
  }
  
  .el-button {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* 导入Excel按钮样式 - 匹配新建报告按钮风格 */
.excel-import-btn {
  background: #1677ff;
  border-color: #1677ff;
  color: white;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.2);
}

.excel-import-btn:hover {
  background: #409eff;
  border-color: #409eff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
}

/* 导出Excel按钮样式 - 匹配查看技术标准按钮风格 */
.excel-export-btn {
  background: #e6a23c;
  border-color: #e6a23c;
  color: white;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
  margin-left: 12px;
}

.excel-export-btn:hover {
  background: #f39c12;
  border-color: #f39c12;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* 下载模板按钮样式 - 匹配查看技术标准按钮风格 */
.template-btn {
  background: #67c23a;
  border-color: #67c23a;
  color: white;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.2);
  margin-left: 12px;
}

.template-btn:hover {
  background: #5daf34;
  border-color: #5daf34;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}



/* 清空全部按钮样式 - 匹配查看技术标准按钮风格 */
.clear-btn {
  background: #f56c6c;
  border-color: #f56c6c;
  color: white;
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.2);
  margin-left: 12px;
}

.clear-btn:hover {
  background: #e74c3c;
  border-color: #e74c3c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
}

/* 强制覆盖Element Plus按钮的内部结构 */
.excel-import-btn :deep(.el-button__content),
.excel-export-btn :deep(.el-button__content),
.template-btn :deep(.el-button__content),
.clear-btn :deep(.el-button__content) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  text-align: center;
}

.excel-import-btn :deep(span:first-child),
.excel-export-btn :deep(span:first-child),
.template-btn :deep(span:first-child),
.clear-btn :deep(span:first-child) {
  margin-right: 4px;
  font-weight: bold;
  font-size: 16px;
}

/* 删除按钮样式优化 - 与项目整体风格保持一致 */
.el-button[type="danger"] {
  background: linear-gradient(135deg, #f56c6c 0%, #e74c3c 100%);
  border: 1px solid #f56c6c;
  color: white;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.el-button[type="danger"]:hover {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-color: #e74c3c;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(245, 108, 108, 0.3);
}

/* 只读标签 */
.readonly-tag {
  background: #e9ecef;
  color: #764ba2;
  font-size: 13px;
  border-radius: 8px;
  padding: 2px 10px;
  margin-left: 8px;
  font-weight: 500;
}

/* 主要内容区域 */
.main-content {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 40px;
}

/* 左侧面板 */
.left-panel {
  position: sticky;
  top: 20px;
  height: fit-content;
}

.panel-card {
  background: white;
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(64, 158, 255, 0.1);
  max-width: 1400px;
  width: 100%;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.panel-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

.add-btn {
  border-radius: 6px;
  font-weight: 500;
}

.paper-type-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.paper-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  background: #f8f9fa;
}

.paper-type-item:hover {
  background: #e9ecef;
  transform: translateX(4px);
}

.paper-type-item.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-color: #667eea;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.type-name {
  font-weight: 500;
  font-size: 14px;
}

.type-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* 右侧面板 */
.right-panel {
  min-height: 600px;
}

.weight-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.weight-item {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.weight-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.weight-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  gap: 16px;
}

.weight-input-group {
  flex: 1;
  max-width: 200px;
}

.weight-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  margin-bottom: 8px;
}

.weight-input {
  border-radius: 8px;
}

.delete-btn {
  border-radius: 6px;
  white-space: nowrap;
}

/* 等级维护区 */
.grades-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.grade-item {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.grade-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.grade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* 指标部分 */
.indicators-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #dee2e6;
}

.indicators-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.indicators-title {
  font-size: 16px;
  font-weight: 600;
  color: #495057;
  margin: 0;
}

.add-indicator-btn {
  border-radius: 6px;
}

.indicators-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.indicator-item {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.indicator-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  flex: 1;
}

.input-group {
  display: flex;
  flex-direction: column;
}

.input-label {
  font-size: 12px;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.delete-indicator-btn {
  border-radius: 6px;
  white-space: nowrap;
  height: 40px;
}

/* 分组标题美化 */
.paper-group {
  margin-bottom: 36px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.02), rgba(118, 75, 162, 0.02));
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.paper-title {
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.paper-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: inline-block;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.version-block {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 20px 24px 16px 24px;
  margin-bottom: 20px;
  border: 1px solid rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
}

.version-block:hover {
  box-shadow: 0 6px 24px rgba(102, 126, 234, 0.12);
  transform: translateY(-2px);
}

.version-title {
  font-size: 16px;
   font-weight: 600;
   color: #495057;
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 8px 12px;
   border-radius: 8px;
   transition: all 0.3s ease;
   background: #f8f9fa;
   border: 1px solid #e9ecef;
   cursor: pointer;
   min-height: 44px; /* 确保触摸友好 */
 }
 
 .version-title:hover {
   background: #e9ecef;
   transform: translateX(2px);
 }
 
 .version-title:active {
   transform: scale(0.98);
 }
 
  .version-title i {
   color: #667eea;
   font-size: 16px;
   transition: transform 0.3s ease;
 }
 
 .version-actions {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
 .version-actions .el-button {
   transition: all 0.3s ease;
 }
 
 .version-actions .el-button:hover {
   transform: scale(1.05);
 }
 
 .version-content {
  padding: 20px 0;
  animation: fadeIn 0.3s ease;
  border-left: 3px solid rgba(102, 126, 234, 0.2);
  padding-left: 20px;
  margin-left: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  position: relative;
}

/* 移动端表格滚动提示 */
.table-wrapper::after {
  content: '← 左右滑动查看更多 →';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #666;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0.8;
}

@media (min-width: 769px) {
  .table-wrapper::after {
    display: none;
  }
}
 
 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(-10px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
.version-remark {
  color: #6c757d;
  font-size: 13px;
  margin-left: 16px;
  font-style: italic;
  background: rgba(102, 126, 234, 0.05);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

/* 表格美化 */
.standard-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.08);
  border: 1px solid rgba(102, 126, 234, 0.1);
  margin-top: 12px;
}

.standard-table .el-table__header {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.standard-table .el-table__header .el-table__cell {
  background: transparent;
  color: #2d3748 !important;
  font-weight: 700 !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-shadow: none;
  font-size: 14px !important;
  letter-spacing: 0.5px;
}

.standard-table .el-table__body .el-table__row:hover {
  background: rgba(102, 126, 234, 0.05);
}
/* 表格单元格居中 */
.standard-table .el-table__cell {
  text-align: center !important;
  color: #2d3748 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
.standard-table .el-table__header .el-table__cell {
  text-align: center !important;
}

/* 空状态美化 */
.empty-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px 60px 20px;
  text-align: center;
  color: #6c757d;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.02), rgba(118, 75, 162, 0.02));
  border-radius: 16px;
  border: 2px dashed rgba(102, 126, 234, 0.2);
  margin: 20px 0;
}

.empty-all .empty-icon {
  font-size: 72px;
  margin-bottom: 24px;
  opacity: 0.6;
  filter: grayscale(0.3);
}

.empty-all .empty-text {
  font-size: 18px;
  font-weight: 500;
  color: #495057;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    padding: 0 8px;
  }
  
  .left-panel {
    position: static;
  }
  
  .paper-type-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .paper-type-item {
    min-width: 120px;
  }
}

@media (max-width: 768px) {
  .standard-maintain-container {
    padding: 8px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 16px 8px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  .excel-import-btn, .excel-export-btn, .template-btn, .clear-btn {
    min-width: 100px;
    padding: 8px 16px;
    font-size: 14px;
    height: 36px;
  }
  
  .panel-card {
    padding: 12px;
    max-width: 100vw;
  }
  
  .paper-group {
    margin-bottom: 16px;
    padding: 16px;
  }
  
  .paper-title {
    font-size: 16px;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .version-block {
    padding: 12px 8px;
    margin-bottom: 12px;
  }
  
  .version-title {
    font-size: 14px;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .version-content {
    padding: 12px 0;
    margin-left: 4px;
    padding-left: 12px;
  }
  
  .table-wrapper {
    margin-bottom: 12px;
  }
  
  .standard-table {
    min-width: 600px;
    font-size: 12px;
  }
  
  .standard-table .el-table__body,
  .standard-table .el-table__header {
    min-width: 600px;
  }
  
  .version-remark {
    font-size: 12px;
    margin-left: 0;
  }
  
  .weight-item {
    padding: 12px;
  }
  
  .weight-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .weight-input-group {
    max-width: none;
  }
  
  .indicator-inputs {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .indicator-item {
    flex-direction: column;
    align-items: stretch;
  }
  
  .delete-indicator-btn {
    align-self: flex-end;
  }
  
  .std-tag {
    font-size: 12px;
    padding: 3px 8px;
    min-width: 35px;
  }
}

@media (max-width: 700px) {
  .standard-maintain-container {
    padding: 8px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 16px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .page-subtitle {
    font-size: 14px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  
  .excel-import-btn, .excel-export-btn, .template-btn, .clear-btn {
    min-width: 100px;
    padding: 8px 16px;
    font-size: 14px;
    height: 36px;
  }
  
  .panel-card {
    padding: 12px;
    max-width: 100vw;
  }
  
  .paper-group {
    margin-bottom: 16px;
  }
  
  .paper-title {
    font-size: 16px;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .version-block {
    padding: 12px 8px;
    margin-bottom: 12px;
  }
  
    .version-title {
    font-size: 14px;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .version-content {
    padding: 12px 0;
    margin-left: 4px;
    padding-left: 12px;
  }
  
  .table-wrapper {
    margin-bottom: 12px;
  }
  
  .standard-table {
    min-width: 600px;
    font-size: 12px;
  }
  
  .standard-table .el-table__body,
  .standard-table .el-table__header {
    min-width: 600px;
  }
  
  .version-remark {
    font-size: 12px;
    margin-left: 0;
  }
  
  .standard-version-id {
    font-size: 12px;
    margin-left: 16px;
  }
  
  .version-content {
    margin-top: 12px;
  }
  
  .standard-table {
    font-size: 12px;
    min-width: 600px;
    overflow-x: auto;
    display: block;
  }
  
  .standard-table__body-wrapper {
    overflow-x: auto !important;
  }
  
  .el-table {
    font-size: 12px;
    min-width: 600px;
    overflow-x: auto;
    display: block;
  }
  
  .el-table__body-wrapper {
    overflow-x: auto !important;
  }
  
  /* 确保表格容器可以滚动 */
  .version-content {
    margin-top: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* 移动端表格样式优化 */
  .el-table .el-table__header-wrapper,
  .el-table .el-table__body-wrapper {
    overflow-x: auto !important;
  }
  
  .el-table .el-table__body {
    min-width: 600px;
  }
  
  .el-table .el-table__header {
    min-width: 600px;
  }
  
  .version-actions {
    margin-top: 8px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  
  .version-actions .el-button {
    font-size: 12px;
    padding: 6px 12px;
  }
  
  .el-button {
    font-size: 16px !important;
    min-height: 44px !important;
    touch-action: manipulation;
  }
  
  /* 移动端文本优化 */
  .paper-title, .version-title {
    line-height: 1.4;
  }
  
  /* 移动端间距优化 */
  .paper-group {
    margin-bottom: 20px;
  }
  
  .version-block {
    margin-bottom: 16px;
  }
  
  .el-dialog {
    width: 98vw !important;
    min-width: unset !important;
    max-width: 100vw !important;
    margin: 0 auto;
  }
  
  .weight-item {
    padding: 12px;
  }
  
  .weight-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .weight-input-group {
    max-width: none;
  }
  
  .indicator-inputs {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .indicator-item {
    flex-direction: column;
    align-items: stretch;
  }
  
  .delete-indicator-btn {
    align-self: flex-end;
  }
  
  .std-tag {
    font-size: 12px;
    padding: 3px 8px;
    min-width: 35px;
  }
}

/* 新增：超小屏幕优化 */
@media (max-width: 480px) {
  .standard-maintain-container {
    padding: 4px;
  }
  
  .page-header {
    padding: 12px 8px;
  }
  
  .page-title {
    font-size: 18px;
  }
  
  .page-subtitle {
    font-size: 12px;
  }
  
  .header-actions {
    gap: 6px;
  }
  
  .excel-import-btn, .excel-export-btn, .template-btn, .clear-btn {
    min-width: 80px;
    padding: 6px 12px;
    font-size: 12px;
    height: 32px;
  }
  
  .panel-card {
    padding: 8px;
  }
  
  .paper-group {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .paper-title {
    font-size: 14px;
  }
  
  .version-block {
    padding: 8px 6px;
    margin-bottom: 8px;
  }
  
  .version-title {
    font-size: 13px;
  }
  
  .version-content {
    padding: 8px 0;
    margin-left: 2px;
    padding-left: 8px;
  }
  
  .table-wrapper {
    margin-bottom: 8px;
  }
  
  /* 移动端表格优化 - 允许更小的最小宽度 */
  .standard-table {
    min-width: 400px;
    font-size: 11px;
  }
  
  .standard-table .el-table__body,
  .standard-table .el-table__header {
    min-width: 400px;
  }
  
  .el-table {
    min-width: 400px;
    font-size: 11px;
  }
  
  .el-table .el-table__body {
    min-width: 400px;
  }
  
  .el-table .el-table__header {
    min-width: 400px;
  }
  
  .version-remark {
    font-size: 11px;
  }
  
  .std-tag {
    font-size: 11px;
    padding: 2px 6px;
    min-width: 30px;
  }
  
  /* 调试信息在移动端隐藏 */
  .debug-info {
    display: none;
  }
}
.std-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  min-width: 40px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.std-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.std-range {
  background: linear-gradient(135deg, #e3f0ff, #bbdefb);
  color: #1565c0;
  border: 1px solid rgba(21, 101, 192, 0.2);
}
.std-ge {
  background: linear-gradient(135deg, #e6f9ed, #c8e6c9);
  color: #2e7d32;
  border: 1px solid rgba(46, 125, 50, 0.2);
}
.std-le {
  background: linear-gradient(135deg, #fff0f0, #ffcdd2);
  color: #c62828;
  border: 1px solid rgba(198, 40, 40, 0.2);
}
.std-interval {
  background: linear-gradient(135deg, #f3e8ff, #e1bee7);
  color: #6a1b9a;
  border: 1px solid rgba(106, 27, 154, 0.2);
}
.std-gt {
  background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
  color: #00695c;
  border: 1px solid rgba(0, 105, 92, 0.2);
}
.std-lt {
  background: linear-gradient(135deg, #fffbe6, #fff3e0);
  color: #ef6c00;
  border: 1px solid rgba(239, 108, 0, 0.2);
}
.std-value {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #343a40;
  border: 1px solid rgba(52, 58, 64, 0.2);
}

/* 表格头部样式优化 */
.standard-table .el-table__header .el-table__cell {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #2d3748;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  padding: 8px 4px;
  line-height: 1.2;
  white-space: pre-line;
}

.standard-table .el-table__header .el-table__cell > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}
</style> 